<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度音乐</title>
    <style>
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .list-body li:nth-child(even) {
            background: yellow;
        }
        .list-body li:nth-child(odd) {
            background: #fff;
        }
        .list-body li:hover {
            background: green;
        }
        .list-body li.checkedColor {
            background: green;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="../vue/例子/百度音乐全选/css/baidu.css" />
    <script src="../vue/src/vue.js"></script>
    <script>
        let data = [
            {
                id:Date.now()+Math.random(),
                name: '邓紫棋',
                song: '泡沫',
                checked: true,
                album: 10
            },
            {
                id:Date.now()+Math.random(),
                name: '王杰',
                song: '泡沫',
                checked: true,
                album: 10
            },
            {
                id:Date.now()+Math.random(),
                name: '邓紫棋',
                song: '泡沫123',
                checked: false,
                album: 10
            }
        ]
    </script>
</head>
<body>
    <div class="wrap" id="app">
        <div class="baidu">
            <ul class="list list-head">
                <li>
                    <div>
                        <input type="checkbox" 
                            v-model='isCheckedAll' 
                        />全选
                    </div>
                    <span>歌单</span>
                    <span>歌手</span>
                    <span>专辑</span>
                </li>
            </ul>
            <ul class="list list-body">
                <li 
                    v-for="item in songList"
                >
                    <div>
                        <input v-model="item.checked" type="checkbox">
                    </div>
                    <span>{{item.song}}</span>
                    <span>{{item.name}}</span>
                    <span>{{item.album}}</span>
                </li>
            </ul>
            <div class="select">
                <span class="selectAll">

                    <span>统计：</span>
                </span>
            </div>
        {{isCheckedAll}}
    </div>
    <script>
        

        new Vue({
            el: '#app',
            data: {
                songList: data
            },
            computed: {
                /*
                    对计算属性操作
                        只给计算属性一个函数，默认这个函数是在取值的时候触发的,这个函数是get函数

                        设置值
                            set(){}
                        取值
                            get(){}
                */
                isCheckedAll:{
                    get(){
                        console.log('取值');
                        return this.songList.every(function(item){
                            return item.checked
                        });
                    },
                   /*selectedSongersLen(){
                        return this.songList.filters(item => item.checked)
                        return fn(songer).length
                    },
                    album () {
                        return this.songList.filter(item => checked).reduce((n,item2) => n + item2.album,0 )
                    },*/
                    set(newValue){
                        console.log('设置值了');
                        console.log(newValue);

                       this.songList.forEach(item => item.checked = newValue)
                    }
                }
            },
          
        })

    </script>
</body>
</html>